<template>
  <el-dialog
    title="订单确认"
    :visible.sync="centerDialogVisible"
    :close-on-click-modal=false
    :modal-append-to-body=false
    :append-to-body=false
    width="40%"

    center>
    <div class="dialog-context">
         <ul>
           <li>货车类型：{{car}}</li>
         <li v-for="(oldValue,key,index) in info" :key="index" v-if="isShow(key)">{{type[index]}}:{{oldValue}}</li>
           <li>货物类型：{{cargo[+info.cargoTypeId-1]}}</li>
           <li>重量：{{info.weight}}kg</li>
         <li>价格：{{price}}元</li>
         </ul>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="successOrder">确定下单</el-button>
  </span>
  </el-dialog>
</template>

<script>
   import  {addOrder} from '@/api/order/order'
   export default {
     name:'Confirm',
     props:['info','remakeForm','price','cargo','car'],
     data() {
       return {
         centerDialogVisible: false,
         type:['起点','出发区','出发镇','目的地','到达区','到达镇','货物类型','重量','发货人电话','发货人','收货人电话','收货人'],
       }
     },
     methods:{
        open(){
          this.centerDialogVisible = true;
        },
       successOrder(){
         this.centerDialogVisible = false;
         addOrder(this.info)
         this.$emit('remakeForm');
         alert('你已成功下单!');
       },
       isShow(key){
          if(key !== 'weight' && key !== 'cargoTypeId'){
            return true;
          }else{
            return false;
          }
       }
     },

   }
</script>

<style scoped>
  .el-dialog__wrapper{
    position: fixed;
    bottom: 50px;
  }

  .dialog-context{
    margin: 0 auto;
    width: 400px;

  }
  .dialog-context ul{
     list-style: none;
     color:black;
     font-size: 20px;
  }
  .dialog-context ul li{
    margin: 5px 40px;
  }
</style>
